<template>
  <div id="login">
    <div class="center-container">
      <el-card class="cover" v-if="loginAdmin.id">
        <slide-verify :l="42"
                      :r="10"
                      :w="310"
                      :h="155"
                      :accuracy="5"
                      :imgs="puzzleImgList"
                      slider-text="向右滑动"
                      @success="onSuccess"
                      @fail="onFail"
                      @refresh="onRefresh"
        ></slide-verify>
      </el-card>
    </div>
    <div class="container">
      <div class="title">用户登录</div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="uname">
          <el-input placeholder="请输入账号" prefix-icon="el-icon-user" size="medium" v-model="form.uname"></el-input>
        </el-form-item>
        <el-form-item prop="upwd">
          <el-input placeholder="请输入密码" show-password prefix-icon="el-icon-lock" size="medium"
                    v-model="form.upwd"></el-input>
        </el-form-item>
        <div class="button-row">
          <el-button size="medium" type="primary" @click="login" :style="buttonStyle">登录</el-button>
        </div>
      </el-form>
      <div class="button-group">
        <button class="text" @click="forget_password">忘记密码</button>
        <button class="text" @click="change_password">更改密码</button>
        <button class="text" @click="user_register">用户注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Cookies from 'js-cookie'

export default {
  name: "Login",
  computed: {
    buttonStyle() {
      const inputWidth = 300; // 输入框的宽度
      const buttonPadding = 10; // 按钮的内边距
      const buttonIconWidth = 14; // 按钮图标的宽度
      return `width: calc(${inputWidth}px - ${buttonPadding * 2}px - ${buttonIconWidth}px)`;
    }
  },
  data() {
    return {
      puzzleImgList: [
        require('@/assets/logo.png'),
        require('@/assets/one.jpg'),

      ],
      loginAdmin: {},
      form: {},
      rules: {
        uname: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 1, max: 254, message: '请输入正确的账号!', trigger: 'blur'}
        ],
        upwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},

          {min: 1, max: 254, message: '请输入正确的密码!', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过时的处理逻辑
          request.post('user/login', this.form).then(res => {
            if (res.code === '200') {
              this.loginAdmin = res.data  // 滑块组件就出现了


            } else {
              this.$notify.error(res.msg)
            }
          })
        }
      });

    },
    onSuccess() { // 滑块验证通过之后触发的
      Cookies.set('user', JSON.stringify(this.loginAdmin))
      this.$notify.success("登录成功")
      this.$router.push('/')
    },
    onFail() {
      console.log('onFail')
    },
    onRefresh() {
      console.log('refresh')
    },
    forget_password() {
      this.$router.push({name: 'LoginForget'});
    },
    user_register() {
      this.$router.push({name: 'LoginRegister'});
    },
    change_password(){
      this.$router.push({name:'LoginChange'});
    }
  }
}
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #eee;
}

#login {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  width: 500px;
  height: 400px;
  background-color: white;
  border-radius: 10px;
  margin: auto;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 20px;
}

.title {
  margin: 30px;
  text-align: center;
  font-size: 30px;
  color: dodgerblue;
}

.button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.text {
  color: #999;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

.cover {
  width: fit-content;
  background-color: white;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
</style>
